﻿<script setup lang="ts" name="FolderAdd">
import { FolderApi } from '@/api/infra/file'
import { getTreeExpandNodeParents } from '../utils'

const { error, success } = useMessage()
const emit = defineEmits(['save', 'close'])

const props = defineProps({
  folderList: { type: Array as any }
})

const initInfo: any = ref({
  dialogVisible: false,
  folder_id: 0,
  treeList: [],
  defaultExpandNodes: [],
  form: {
    folder_id: 0,
    title: ''
  }
})

watch(
  () => props.folderList,
  (val) => {
    initInfo.value.treeList = val
  },
  {
    deep: true,
    immediate: true
  }
)

// 显示弹窗
const showDialog = (v) => {
  initInfo.value.dialogVisible = true
  initInfo.value.form.title = ''
  initInfo.value.form.folder_id = v ? v.id : initInfo.value.treeList[0].id
  initInfo.value.defaultExpandNodes = getTreeExpandNodeParents(initInfo.value.treeList, v.folder_id)
  initInfo.value.defaultExpandNodes.push(v.id)
}

// 子组件将方法暴露给父组件
defineExpose({ showDialog })

// 关闭弹窗
const closeDialog = () => {
  initInfo.value.dialogVisible = false
  emit('close')
}

// 保存
const handleOk = () => {
  if (initInfo.value.form.title === '') {
    error('文件夹名称不能为空')
    return false
  }
  FolderApi.create(initInfo.value.form).then((res:any) => {
    if (res.code === 200) {
      success('文件夹创建成功！')
      res.data.id = parseInt(res.data.folder_id)
      res.data.folder_id = initInfo.value.form.folder_id
      emit('save', res.data)
      closeDialog()
    }
  })
}

// 文件夹树结构过滤查询
const filterNode = (value, data) => {
  if (!value) return true
  return data.title.includes(value)
}
</script>

<template>
  <ElDialog v-model="initInfo.dialogVisible" title="新建文件夹" width="700px" align-center @close="closeDialog">
    <ElForm label-width="auto" label-position="top">
      <ElFormItem label="上级文件夹：">
        <ElTreeSelect
          v-model="initInfo.form.folder_id"
          class="tree-level"
          node-key="id"
          :props="{ label: 'title'}"
          :data="initInfo.treeList"
          check-strictly
          :render-after-expand="false"
          filterable
          auto-expand-parent
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          :check-on-click-node="true"
          :default-expanded-keys="initInfo.defaultExpandNodes">
          <template #default="{ node, data }">
            <span class="item-tree-node">
              <span>{{ node.label }}</span>
              <template v-for="item in data.level">
                <span v-if="!data.hideLine.includes(item)" :key="item.value" :class="['item-tree-node-line-vertical',data.isLast&&item==data.level?'is-last':'',data.isFirst&&data.level===1?'is-first':'']" :style="{left:8+18*(item-1)+12+'px'}" />
              </template>
              <span class="item-tree-node-line-horizontal" :style="{left:8+18*(data.level-1)+12+'px'}" />
            </span>
          </template>
        </ElTreeSelect>
      </ElFormItem>
      <ElFormItem label="文件夹名称：">
        <ElInput v-model="initInfo.form.title" clearable maxlength="20" show-word-limit placeholder="请输入文件夹名称，长度不超过20个字" />
      </ElFormItem>
    </ElForm>
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="closeDialog">取消</ElButton>
        <ElButton type="primary" @click="handleOk">确定</ElButton>
      </span>
    </template>
  </ElDialog>
</template>

<style scoped lang="scss">
.el-form{
  padding: 40px 100px;
}
</style>
